<template>
  <div class="informationShow">
    <el-row :gutter="10" :data="data">
      <div :class="detailInfoWrap">
        <el-col :span="24" class="mgb10"><b>{{ option.title }}</b></el-col>
        <el-col v-for="(item, index) in option.column" :key="index" class="mb5" :span="item.span">
          <span>{{ item.label }} ：</span><span :class="{red:data.isRed && isPhone}">{{ item | dataDicTrans(data) }}</span>
        </el-col>
      </div>
      <!-- <el-col :span="24" class="detailInfoBtn">
        <el-button class="custInfoBtn" @click="custInfoBtn" v-html="custInfoBtnTit"></el-button>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { dataDicTrans } from '@/api/bankBiz/loss/loss'
export default {
  name: 'InformationShow',
  props: ['data', 'option'],
  data() {
    return {
      detailInfoWrap: 'cus-info-simple',
      custInfoBtnTit: '详细信息',
      isPhone: false
    }
  },
  mounted() {
    console.log(this.option)
    this.option.column.forEach(item => {
      if (item.prop == 'mobileNo') {
        this.isPhone = true
      }
    })
  },
  methods: {
    //      dataDicTrans(item, data) {
    //        dataDicTrans(item, data)
    //      },
    custInfoBtn() {
      this.detailInfoWrap = this.detailInfoWrap == 'cus-info-simple' ? 'cus-info-detail' : 'cus-info-simple'
      if (this.detailInfoWrap == 'cus-info-simple') {
        this.custInfoBtnTit = '详细信息'
      } else {
        this.custInfoBtnTit = '收起'
      }
    }
  }
}
</script>

<style scoped>

  .mb5 {
    margin-bottom: 5px;
  }

  .informationShow .el-col {
    line-height: 24px;
  }

  .mgb10 {
    margin-bottom: 10px;
  }

  .cus-info-simple {
    overflow: hidden;
  }

  .cus-info-detail {
    height: auto;
    overflow: hidden;
  }

  .detailInfoBtn {
    text-align: right;
    height: 40px;
    line-height: 40px;
    border-top: 1px #ccc dashed;
    padding-top: 8px;
  }
  .red{
    color:red;
  }
</style>
